<template>
  <view class="home">
    <view class="top">
      <!-- 父传子：背景色  ，圆角 -->
      <!-- <my-search bgc="#fed1e6" :br="0"></my-search> -->
      <my-search @click="searchClick"></my-search>
      <!--  子传父
       <子组件标签  @xxx="xxxfn">
       子组件内:this.$emit('xxx')
       -->
    </view>
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <view class="swiper-item" @click="goDetail(item.navigator_url)">
          <image class="swiper-img" :src="item.image_src" mode="widthFix"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 分类导航  -->
    <view class="cate">
      <view class="item" v-for="(item,index) in cateList" :key="index" @click="goCate(index)">
        <image class="img" :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <view class="item" v-for="(item,index) in floorList" :key="index">
        <view class="title">
          <image :src="item.floor_title.image_src" mode="widthFix"></image>
        </view>
        <view class="floor-img">
          <view class="left">
            <image @click="goList(item.product_list[0].name)" class="ml" :src="item.product_list[0].image_src"
              mode="widthFix" :style="{width:item.product_list[0].image_width+'rpx'}"></image>
          </view>
          <view class="right">
            <template v-for="(i,v) in item.product_list">
              <image @click="goList(i.name)" class="ml" v-if="v!==0" :key="v" :src="i.image_src" mode="widthFix"
                :style="{width:i.image_width+'rpx'}">
              </image>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 
   小程序路由跳转：
   uni.
      navigateTo 跳转非tabbar页面
      switchTab  跳转tabbar页面
      reLanch    跳转所有页面都可以（先关闭所有页面，再跳转到其它页面）
      navigateBack 返回
      redirectTo 关闭当前页面，再跳转到其它页面 
   -->
</template>

<script>
  import mixinjs from '@/mixins/index.js'
  export default {
    mixins: [mixinjs],
    data() {
      return {
        swiperList: [],
        cateList: [],
        floorList: []
      };
    },
    onLoad() {
      this.homeSwiperdata()
      this.homeCatitems()
      this.homeFloordata()
    },
    methods: {
      // 轮播图
      async homeSwiperdata() {
        // const res=await uni.$http.get('url',{params:{参数名:参数值}})   
        // const res=await uni.$http.post('url',{data:{参数名:参数值}})
        const {
          message
        } = await uni.$http.get('/home/swiperdata')
        this.swiperList = message
      },
      // 分类导航 
      async homeCatitems() {
        const res = await uni.$http.get('/home/catitems')
        this.cateList = res.message
        console.log('分类', res);
      },
      // 轮播图点击跳转
      goDetail(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 分类跳转
      goCate(index) {
        if (index === 0) {
          uni.switchTab({
            url: "/pages/cate/cate"
          })
        }
      },
      // 楼层数据获取
      async homeFloordata() {
        const res = await uni.$http.get('/home/floordata')
        this.floorList = res.message
        console.log('楼层数据', res);
      },
      // 跳转到列表页
      goList(name) {
        uni.navigateTo({
          url: "/pages/list/list?key=" + name
        })
      },
      searchClick() {
        // console.log('searchClick');
        uni.navigateTo({
          url: "/pages/search/search"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    .swiper-img {
      width: 100%;
    }

    .cate {
      display: flex;
      justify-content: space-evenly;
      margin: 10rpx 0;

      .item {
        width: 25%;
        flex: 1;
        text-align: center;

        .img {
          width: 80%;
        }
      }
    }

    .floor {
      .title {
        margin: 10rpx 0;
      }

      .floor-img {
        display: flex;
      }

      .ml {
        margin-left: 10rpx;
      }
    }
  }

  .top {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }
</style>